<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="/css/style.css?v=4.0.0" rel="stylesheet">
<link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="/css/plugins/chosen/chosen.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
	href="/css/plugins/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css"
	href="/css/demo/webuploader-demo.css">
<link
	href="/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
	rel="stylesheet">
<link href="/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
<base target="_blank">

<style>
.droppable-active {
	background-color: #ffe !important;
}

.tools a {
	cursor: pointer;
	font-size: 80%;
}

.form-body .col-md-6, .form-body .col-md-12 {
	min-height: 400px;
	padding: 50px
}

.draggable {
	cursor: move;
}
</style>

</head>
<body>
	<div class="wrapper wrapper-content animated fadeInRight">
		<form id="addTopicFrm" class="itemForm" method="post">
			<input type="hidden" id="topicId"
				value="${topic==null?'':((topic.topicId==null||topic.topicId=='')?'':topic.topicId)}" />
			<div class="row">
				<div class="col-md-12">
					<div class="ibox-content">
						<div class="form-group">
							<label class="col-sm-2 control-label">题目内容：</label>
							<div class="col-sm-10">
								<input type="text" name="topicContent" class="form-control"
									placeholder="请输入文本"
									value="${topic==null?'':((topic.topicContent==null||topic.topicContent=='')?'':topic.topicContent)}" />
								<span class="help-block m-b-none"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">类型：</label>
					<div class="col-sm-10">
						<c:if test="${topic==null}" var="term">
							<div class="radio radio-inline">
								<input type="radio" id="option1" value="1" checked="checked"
									name="typeId" /> <label for="inlineRadio1"> 单选题 </label>
							</div>
							<div class="radio radio-inline">
								<input type="radio" id="option2" value="2" name="typeId" /> <label
									for="inlineRadio2"> 多选题 </label>
							</div>
							<div class="radio radio-inline">
								<input type="radio" id="option3" value="3" name="typeId" /> <label
									for="inlineRadio3"> 简答题 </label>
							</div>
						</c:if>
						<c:if test="${topic!=null}">
							<div class="radio radio-inline">
								<c:choose>
									<c:when test="${topic.typeId==1}">
										<input type="radio" checked="checked" value="1"
											id="topicType1" name="typeId" />
									</c:when>
									<c:otherwise>
										<input type="radio" value="1" id="topicType1" name="typeId" />
									</c:otherwise>
								</c:choose>
								<label for="inlineRadio1"> 单选题 </label>
							</div>
							<div class="radio radio-inline">
								<c:choose>
									<c:when test="${topic.typeId==2}">
										<input type="radio" checked="checked" value="2"
											id="topicType2" name="typeId" />
									</c:when>
									<c:otherwise>
										<input type="radio" value="2" id="topicType2" name="typeId" />
									</c:otherwise>
								</c:choose>
								<label for="inlineRadio2"> 多选题 </label>
							</div>
							<div class="radio radio-inline">
								<c:choose>
									<c:when test="${topic.typeId==3}">
										<input type="radio" checked="checked" value="3"
											id="topicType3" name="typeId" />
									</c:when>
									<c:otherwise>
										<input type="radio" value="3" id="topicType3" name="typeId" />
									</c:otherwise>
								</c:choose>
								<label for="inlineRadio3"> 简答题 </label>
							</div>
						</c:if>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">种类</label>
					<div class="col-sm-10">
						<select class="form-control m-b" name="categoryId" id="categoryId">
							<option
								value="${topic==null?'':((topic.categoryId==null||topic.categoryId=='')?'':topic.categoryId)}"
								checked="checked">
								${topic==null?'':((topic.categoryName==null||topic.categoryName=='')?'':topic.categoryName)}
							</option>
						</select>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">选项A：</label>
					<div class="col-sm-10">
						<input type="text" id="option_a" name="optionA"
							class="form-control" placeholder="请输入文本"
							value="${topic==null?'':((topic.optionA==null||topic.optionA=='')?'':topic.optionA)}">
						<span class="help-block m-b-none"></span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">选项B：</label>
					<div class="col-sm-10">
						<input type="text" id="option_b" name="optionB"
							class="form-control" placeholder="请输入文本"
							value="${topic==null?'':((topic.optionB==null||topic.optionB=='')?'':topic.optionB)}">
						<span class="help-block m-b-none"></span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">选项C：</label>
					<div class="col-sm-10">
						<input type="text" id="option_c" name="optionC"
							class="form-control" placeholder="请输入文本"
							value="${topic==null?'':((topic.optionC==null||topic.optionC=='')?'':topic.optionC)}">
						<span class="help-block m-b-none"></span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">选项D：</label>
					<div class="col-sm-10">
						<input type="text" id="option_d" name="optionD"
							class="form-control" placeholder="请输入文本"
							value="${topic==null?'':((topic.optionD==null||topic.optionD=='')?'':topic.optionD)}" />
						<span class="help-block m-b-none"></span>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-2 control-label">答案：</label>
					<div class="col-sm-10">
						<input type="text" id="topicAnswer" name="topicAnswer"
							class="form-control" placeholder="请输入文本"
							value="${topic==null?'':((topic.topicAnswer==null||topic.topicAnswer=='')?'':topic.topicAnswer)}" />
						<span class="help-block m-b-none"></span>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-3 control-label">答案解析：</label>
					<div class="col-sm-8">
						<textarea id="topicExplain" name="topicExplain" rows="6"
							class="form-control" required="" aria-required="true">${topic==null?'':((topic.topicExplain==null||topic.topicExplain=='')?'':topic.topicExplain)}
							</textarea>
					</div>
				</div>
			</div>
			<div class="row">
				<input type="hidden" id="imgUrlDetail" value="${topic==null?'':((topic.topicImg==null||topic.topicImg=='')?'':topic.topicImg)}" />
				<div class="ibox-content" id="imgContent" >
				
					<%-- <c:if test="${topic!=null}" var="term">
						<c:if test="${topic.topicImg !=null}">
						<c:set value=""></c:set>
							<a class="fancybox" href="${topic.topicImg}" title="图片"> <img
								alt="image" src="${topic.topicImg}" />
							</a>
						</c:if>
					</c:if> --%>
				</div>
			</div>
		</form>

		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>添加题目图片</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="form_file_upload.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="form_file_upload.html#">选项1</a></li>
								<li><a href="form_file_upload.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<div class="page-container">
							<div id="uploader" class="wu-example">
								<div class="queueList">
									<div id="dndArea" class="placeholder">
										<div id="filePicker"></div>
										<p>或将照片拖到这里，单次最多可选300张</p>
									</div>
								</div>
								<div class="statusBar" style="display: none;">
									<div class="progress">
										<span class="text">0%</span> <span class="percentage"></span>
									</div>
									<div class="info"></div>
									<div class="btns">
										<div id="filePicker2"></div>
										<div class="uploadBtn">开始上传</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-1"></div>
			
			<button class="btn btn-primary" type="button" id="formBtn">
				<i class="fa fa-check"></i>&nbsp;提交
			</button>
			

			<form action="/uploadFile/excel" method="post" enctype="multipart/form-data">
				<div class="col-sm-4 control-label">
					<span class="btn btn-primary fileinput-button" id="filebth">
					<span id="labelPicture">导入Excel</span>
					<input type="file" id="inputExcel" name="fileData">
					</span>
				</div>
				<button class="btn btn-primary" type="submit" id="importBtn">
				<i class="fa fa-check"></i>&nbsp;上传
			</button>
			</form>
			<!-- <button class="btn btn-primary" type="button">
				<i class="fa fa-check"></i>&nbsp;重置
			</button> -->
			<div class="col-sm-5"></div>
		</div>

	</div>
	<!-- 全局js -->
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>

	<!-- 自定义js -->
	<script src="/js/content.js"></script>
	<!-- Fancy box -->
	<script src="/js/plugins/fancybox/jquery.fancybox.js"></script>
	<!-- Prettyfile -->
	<script src="/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
	<!-- jQuery UI -->
	<script src="/js/jquery-ui-1.10.4.min.js"></script>
	<!-- iCheck -->
	<script src="/js/plugins/iCheck/icheck.min.js"></script>
	<!-- From Builder -->
	<script src="/js/plugins/beautifyhtml/beautifyhtml.js"></script>
	<script type="text/javascript" src="/js/ajaxfileupload.js"></script>
	<script type="text/javascript" src="/js/jqueryform.js"></script>
	<!-- Web Uploader -->
	<script type="text/javascript">
		// 添加全局站点信息
		var BASE_URL = '/js/plugins/webuploader';
	</script>
	<script src="/js/plugins/webuploader/webuploader.min.js"></script>

	<script src="/js/demo/webuploader-demo.js"></script>
	<!-- layer javascript -->
	<script src="/js/plugins/layer/layer.min.js"></script>
	<script>
		function getSelectOptions() {
			$
					.ajax({
						url : '/category/name/detail',
						dataType : 'json',
						type : 'post',
						success : function(data) {

							var $select = $("#categoryId");
							// 判断select是否有option子元素，若有则表示为编辑，若没有则为新增
							var $optionChecked = $("option[checked='checked']");
							var categoryId = $optionChecked.val();
							var categoryName = $optionChecked.html();
							var optionFirst = '';
							if (categoryId != '' && categoryName != "") {
								// 获取option选中的元素
								// 拼接option
								var optionFirst = "<option "+
						"value='" + categoryId + "'>"
										+ categoryName + "</option>";
								// 将其添加到select中
							}

							$select.empty();
							if (optionFirst != "") {
								$select.append(optionFirst);
							}
							// 题目编辑时，拼接option并置于首位
							// 遍历服务端传过来的数据
							$(data)
									.each(
											function(n, value) {
												if (value.categoryId != categoryId) {

													// 对每个数据封装一个option
													var option = "<option "+
								"value='" + value.categoryId + "'>"
															+ value.categoryName
															+ "</option>";
													// 将其添加到select中
													$select.append(option);

												}
											});
						},
						error : function() {
							layer.msg('请求错误', {
								icon : 2
							});
						}
					})
		}

		
		function showImg() {
			
			var imgurls = $("#imgUrlDetail").val();
			if(imgurls != null && imgurls != "") {
				var imgs = imgurls.split(",")
				$(imgs).each(function(n, value){
	    			var imgEle = "<a class='fancybox' href='"+ value + "' title='图片'> <img "+
	        		"alt='image' src=' " + value  +  " ' />"	
	        		$("#imgContent").append(imgEle);
				})
				
			}
		}
		
		$(document).ready(function() {
			$("#inputExcel").change(function(){
		        // 获得文件
		        var file = $("#inputExcel").val();
		        //　截取上传的文件后缀
		        var extension = file.substring(file.lastIndexOf("."),file.length);
		        // 验证上传文件后缀是否合法
		        var strRegex = "(.xls|.xlsx)$";
		        var re = new RegExp(strRegex);
		        var flag;
		        // 如果不合法，在页面上显示出相应的提示消息
		        if (!re.test(extension.toLowerCase())) {
		            layer.msg('文件名不合法，请上传Excel文件！', {
		                icon : 2
		            });
		          return false;
		        }
		       
		        $("#importBtn").sumbit(function(){
		        });
		     }); 
			
			
			
			
			
			
			$('.fancybox').fancybox({
				openEffect : 'none',
				closeEffect : 'none'
			});

			getSelectOptions();
			showImg();
			$("#formBtn").bind('click', function() {
				var imgUrl = $("#imgUrlDetail").val();
				var topicId = $("#topicId").val();
				if (imgUrl != "" && imgUrl != null) {
					if(imgUrl.indexOf(",") == 0) {
						imgUrl = imgUrl.substring(1);
					}
				}
				$("#addTopicFrm").ajaxSubmit({
					url : '/topic/add',
					type : 'post',
					data : {
						"topicImg" : imgUrl,
						"topicId" : topicId
					},
					dataType : 'json',
					success : function(data) {
						if (data.status == 200) {
							layer.msg('操作成功', {
								icon : 1
							});
						} else {
							layer.msg('操作失败', {
								icon : 2
							});
						}
					}
				});
			});
		});
	</script>
</body>
</html>